<template>
  <div>
    <SearchHeader v-model="queryParam.where.keyword" @handleSearch="getData" :can-add="false">
      <Row :gutter="4">
        <Col span="3"><OrganizationTree ref="srhOrgSelect" width="200px" v-model="queryParam.where.orgId"></OrganizationTree> </Col>
        <Col span="3"><Input :placeholder="$t('name')" v-model="queryParam.where.docName"></Input> </Col>
        <Col span="3"><Dateselect ref="uploadTime" v-model="dateRange" :placeholder="$t('upload_date')"></Dateselect> </Col>
        <Col span="1"><Button type="primary" icon="ios-search" @click="getData">{{$t('search')}}</Button></Col>
      </Row>
    </SearchHeader>
    <Card>
      <Table border :columns="columns" :data="tableData" :loading="loading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" size="small" :Title="$t('play')" icon="md-play"  style="margin-right: 3px" @click="play(row)"></Button>
          <Button type="default" size="small" :title="$t('edit')" icon="md-create" style="margin-right: 3px" @click="edit(row)"></Button>
          <Button type="default" size="small" :title="$t('delete')" icon="md-close"  style="margin-right: 3px" @click="remove(row)"></Button>
          <Button type="default" size="small" :title="$t('download')" icon="md-download" :disabled="true" @click="download(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="fileType">
          <Button type="success" size="small" v-if="row.fileType==1">{{$t('vedio')}}</Button>
          <Button type="error" size="small" v-if="row.fileType==2">{{$t('audio')}}</Button>
          <Button type="default" size="small" v-if="row.fileType==3">{{$t('picture')}}</Button>
          <Button type="default" size="small" v-if="row.fileType==3">{{$t('other')}}</Button>
        </template>
        <template slot-scope="{ row, index }" slot="importance">
          <Button type="success" size="small" v-if="row.importance==1">{{$t('importance_1')}}</Button>
          <Button type="error" size="small" v-if="row.importance==2">{{$t('importance_2')}}</Button>
          <Button type="default" size="small" v-if="row.importance==3">{{$t('importance_3')}}</Button>
        </template>
      </Table>
<!--      <Page class="panel-page" :total="queryParam.page.total" :current="queryParam.page.pages" :page-size="queryParam.page.size" @on-change="changePage" show-elevator show-sizer show-total />-->
      <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
    </Card>

<!--    <Modal v-model="modal.show" :title="modal.title"  :mask-closable="false" :footer-hide="true" width="700px" :closable="false">-->
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="800px" :closable="false">
      <Form ref="formValidate" :model="rowData" label-position="right" :label-width="80" :rules="rules">
        <FormItem :label="$t('file_name')"><Input v-model="rowData.docName" :disabled="true"  maxlength=255 /></FormItem>
        <FormItem :label="$t('remark')" prop="remark"><Input v-model="rowData.remark" maxlength=255 type="textarea" show-word-limit></Input></FormItem>
<!--        <FormItem label="重要级别" prop="impotance"><Input v-model="rowData.impotance"></Input></FormItem>-->
        <FormItem :label="$t('expire_time')">
          <DatePicker type="datetime" v-model="rowData.expireTime" :placeholder="$t('expire_time')" style="width: 200px"></DatePicker>
<!--          <Input v-model="rowData.expireTime"></Input>-->
        </FormItem>
        <FormItem :label="$t('importance')"> <RadioGroup v-model="rowData.importance">
          <Radio :label=1 border>{{$t('importance_1')}}</Radio>
          <Radio :label=2 border>{{$t('importance_2')}}</Radio>
          <Radio :label=3 border>{{$t('importance_3')}}</Radio>
        </RadioGroup></FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save" >{{$t('save')}}</Button>
            <Button @click="close">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
    <VedioPlayer ref="vedioPlayer" ></VedioPlayer>

  </div>
</template>
<script>
import Document from '@/api/document';
import Dateselect from "_c/topnav/date2select"
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from '@/view/Common/SearchHeader'
import OrganizationTree from "_c/topnav/OrganizationTree";
import {apiResult} from "@/libs/util";
export default {
  name: "document",
  components:{SearchHeader,OrganizationTree,Dateselect,TopnavPage},
  computed:{
    columns(){return[
      {title: this.$t('operate'), key: 'action', width: 160,slot: 'action',align: 'center'},
      {title: this.$t('file_name'), key: 'docName', resizable: true,sortable: true, width: 400,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('type'), key: 'fileType', sortable: true, slot: 'fileType',align: 'center', width: 100},
      {title: this.$t('size'), key: 'fileSizeDesc', sortable: true, width: 100,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('duration'), key: 'durationDesc', sortable: true, width: 120,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('shooting_time'), key: 'startTime',width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('upload_time'), key: 'uploadTime',width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('expire_time'), key: 'expireTimeShow',width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('organization'), key: 'orgName', sortable: true,width: 150},
      {title: this.$t('personnel'), key: 'userName', sortable: true,width: 150},
      {title: this.$t('equipment'), key: 'deviceName', sortable: true,width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('storage_server'), key: 'siteName', sortable: true,width: 175,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('storage_path'), key: 'docUri', sortable: true, width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      {title: this.$t('importance'), key: 'fileType', sortable: true, slot: 'importance',align: 'center', width: 150},
      {title: this.$t('remark'), key: 'remark', sortable: true, width: 150,ellipsis:true,tooltip:true,tooltipTheme:'light'}
    ]},
    rules(){
      return{
        remark:[{required: true, message: this.$t('remark_must_be_enter'), trigger: 'blur'}],
        expireTime:[{required: true, message: this.$t('expire_time_must_be_enter'), trigger: 'blur'}],
      }
    }
  },
  data(){
    return{
      api: new Document(),
      playModal:false,
      player: null,
      dateRange: [],
      tableData:[],
      loading:false,
      rowData:{
        docName:null,
        remark:null,
        expireTime:null,
        impotance:1
      },
      queryParam: {
        page: {
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {
          keyWord:null,
          docName: null,
          orgId: null,
          siteId: null,
          deviceId:null,
          userId:null,
          updateTimeFrom:null,updateTimeTo:null,
          uploadTimeFrom:null,uploadTimeTo:null,
          deleteFlag:false
        },
      },

      modal:{
        show:false,
        title: ""
      },

    }
  },
  methods:{
    save(){
      this.api.update(JSON.stringify(
        {
          id: this.rowData.id,
          expireTime: this.rowData.expireTime,
          remark: this.rowData.remark,
          importance: this.rowData.importance
        }

      )).then(res => {
          apiResult(res.data,true,result=>{
            this.modal.show=false;
            this.getData();
          })
      })
    },
    close(){
      this.modal.show=false;
    },
    getData(){
      this.tableData = [];
      /** 生成查询条件 */
      this.queryParam.where.updateTimeBegin = null;
      this.queryParam.where.updateTimeEnd = null;
      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0]=="")){
        this.queryParam.where.updateTimeFrom = this.dateRange[0];
        this.queryParam.where.updateTimeTo = this.dateRange[1];
      }else{
        this.queryParam.where.updateTimeFrom = null;
        this.queryParam.where.updateTimeTo = null;
      }
      this.loading = true;
      this.api.queryPage(JSON.stringify(this.queryParam)).then(res => {
          this.loading = false;
          apiResult(res.data,false,result=>{
            this.queryParam.page.total=result.data.total;
            this.tableData = result.data.records;
          });

      })
    },
    play(row){
      this.$refs.vedioPlayer.play(row.playUrl);
    },
    download(row){
/*      let elemIF = document.createElement('iframe')
      elemIF.src = row.playUrl;
      elemIF.style.display = 'none'
      document.body.appendChild(elemIF);*/

      /*<a href="downloadFileName" target="_blank" download="downloadFileName">下载文件</a>*/

/*
      let a = document.createElement('a')
      a.download =row.playUrl;
      console.log(a);
      a.click();*/
      console.log(row.playUrl);
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";  // 防止影响页面
      iframe.style.height = 0;  // 防止影响页面
      iframe.src = row.playUrl;
      document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
      // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
      setTimeout(()=>{
        iframe.remove();
      }, 5 * 60 * 1000);

    },
    edit(row){
      this.rowData=row;
      console.log(">>>>>> Document.edit: rowData=%o",this.rowData);
      this.modal.show=true;
    },
    remove(row){
      this.$Modal.confirm({
        title: '删除确认',
        content: '<p>删除后将不能恢复，确认要删除此文件吗？</p',
        onOk: () => {
          this.api.remove(JSON.stringify({id:row.id})).then(res=>{
              apiResult(res.data,true,result=>{
                this.getData();
              });
          })
        },
        onCancel: () => {}
      });
    },
    changePage(){
      this.getData();
    },
    videoInitialize(){
      //console.log("初始化videoJD")
    }
  },
  mounted() {
    //console.log("Docuemt Initialize");
    this.modal.title=this.$t('remark');
    this.getData();
  },
  destroyed(){
    //console.log("Docuemt destryed");
  }
}


</script>
<style lang="less">
@import ".././template";
</style>
